import React, { useState } from 'react';
import { useTitle } from 'ahooks';
import {
    Typography,
    Empty,
    Table,
    Tag,
    Space,
    Button,
    Modal,
    Spin,
} from 'antd';
import type { TableColumnsType } from 'antd';
import { produce } from 'immer';
import { DeleteOutlined, RedoOutlined } from '@ant-design/icons';
const { Title } = Typography;
import ListSearch from '../../components/ListSearch';
import useLoadQuestionListData from '../../Hooks/useLoadQuestionListData';
const columns = [
    {
        title: '_id',
        dataIndex: '_id',
    },
    {
        title: '标题',
        dataIndex: 'title',
    },
    {
        title: '日期',
        dataIndex: 'createAt',
    },
    {
        title: '是否发布',
        dataIndex: 'isPublished',
        render: (isPublish: boolean) => {
            return isPublish ? (
                <Tag color="processing">已发布</Tag>
            ) : (
                <Tag>未发布</Tag>
            );
        },
    },
    {
        title: '是否收藏',
        dataIndex: 'isStar',
    },
    {
        title: '回答人数',
        dataIndex: 'answerCount',
    },
];

import styles from './List.module.scss';
export default function Trash() {
    useTitle('小菌问卷-回收站');
    // 回收站列表
    const { data = {}, loading } = useLoadQuestionListData({ isDelete: true });
    const { list = [], total } = data as any;

    // 选中的key列表
    const [selectRowKeys, setSelectRowKeys] = useState<string[]>([]);
    // 选中的行数据
    const [selectRows, setSelectRows] = useState<object[]>([]);
    const rowSelection = {
        onChange(selectRowKeys: any, selectRows: any) {
            setSelectRowKeys(selectRowKeys);
            setSelectRows(selectRows);
        },
    };
    const del = () => {
        Modal.confirm({
            title: '删除',
            content: '确定删除吗？',
            okText: '确定',
            cancelText: '取消',
            onOk: () => {
                // setList(
                //     produce(draft => {
                //         console.log(draft);
                //     })
                // );
            },
        });
    };
    return (
        <div className={styles.container}>
            <div className={styles.header}>
                <div className={styles.left}>
                    <Title level={3}>回收站</Title>
                </div>
                <div className={styles.right}>
                    <ListSearch />
                </div>
            </div>
            <div>
                <Space>
                    <Button
                        type="primary"
                        disabled={selectRowKeys.length === 0}
                        icon={<RedoOutlined />}
                    >
                        恢复
                    </Button>
                    <Button
                        type="primary"
                        disabled={selectRowKeys.length === 0}
                        danger
                        icon={<DeleteOutlined />}
                        onClick={del}
                    >
                        删除
                    </Button>
                </Space>
            </div>
            {!loading && list.length === 0 && <Empty description="暂无数据" />}
            {loading && (
                <div style={{ textAlign: 'center' }}>
                    <Spin />
                </div>
            )}
            {list.length > 0 && (
                <Table
                    columns={columns}
                    dataSource={list}
                    pagination={false}
                    rowKey={item => item._id}
                    rowSelection={{
                        type: 'checkbox',
                        ...rowSelection,
                    }}
                    loading={loading}
                />
            )}
            <div className={styles.list}></div>
            <div className={styles.footer}>分页</div>
        </div>
    );
}
